為什麼要換圖片？

想像你在手機上看一張桌機版的橫幅圖，結果圖片被縮到看不清字，或是浪費了流量載入超大檔案，這就是使用同一張圖的問題。
解法：根據裝置大小載入不同圖片，讓它 又清楚、又省流量、又好看。

方法 1：CSS 媒體查詢（Media Queries）

最簡單的方法，就是用 CSS 根據螢幕寬度換背景圖：

HTML
<div class="banner"></div>

CSS
.banner {
  width: 100%;
  height: 300px;
  background-image: url('banner-desktop.jpg');
  background-size: cover;
}

/* 手機版換小圖 */
@media (max-width: 768px) {
  .banner {
    background-image: url('banner-mobile.jpg');
  }
}

好處：簡單易懂，適合背景圖。
缺點：圖片是用 CSS 載的，可能桌機圖和手機圖都會載入，對效能不太友好。

方法 2： + srcset（推薦圖片標籤用法）

這是 HTML 提供的原生方式，讓瀏覽器自己選適合的圖片。

HTML
<picture>
  <source media="(max-width: 768px)" srcset="banner-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="banner-tablet.jpg">
  <img src="banner-desktop.jpg" alt="活動橫幅">
  </picture>

瀏覽器會依螢幕寬度，自動挑對的圖去載。
好處：不會載到不需要的圖片，效能佳。
缺點：要多寫一點 HTML。

方法 3：img + srcset + sizes（針對解析度）

如果圖片比例相同，只是解析度不同，可以用這招：

HTML
<img 
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w, banner-1600.jpg 1600w"
  sizes="(max-width: 768px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="活動橫幅">

瀏覽器會看裝置大小與解析度，載入最適合的檔案。

生活比喻

桌機用大海報（高清）

平板用中海報

手機用小海報
就像你不會拿報紙大小的地圖塞到手機螢幕看一樣。

結論

要讓圖片依裝置大小變化，核心概念就是 媒體查詢 + 響應式圖片。背景圖適合用 CSS，內容圖片推薦用 或 srcset，這樣不只畫面好看，還能減少流量浪費。